<template >
  <div class="day-account-box">
    <ListTab v-model="activeId" :tabs="tabList" is-table @tabClick="handleTabClick" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="financial-flow">
      <DataDisplay :data-list="statisticsList" class="mb16 mobile-data"/>
      <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;">
        <FilterInput
          ref="FilterToolRef"
          v-model="filterParams"
          :filter-list="filterList"
          show-search-btn
          is-show-config
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus"/>
        <div class="table-top-opeator-bar">
          <el-tooltip content="自定义列" placement="top" effect="dark">
            <div class="order-setting" @click="openSetting"><img :src="settingImg" alt=""></div>
          </el-tooltip>
          <create-button v-if="hasRouteAuth('crm:finance:add')" :add-name="'新增'" style="margin-right:10px;" create-link-name="createDayAccount" class="btn-right-item"/>
          <i v-if="exportLoading" class="el-icon-loading"/>
          <el-button v-if="hasRouteAuth('crm:finance:autoWriteOff')" size="small" type="primary" class="custom-btn" @click="toIntelligentList">智能核销</el-button>
          <MoreOpeator
            ref="btnGroupRef"
            :list="moreOperatorList"
            @beginExport="beginExport"
          />
        </div>
      </div>
      <div class="table-list">
        <DayAccountTable
          ref="dayAccountTable"
          :list="list"
          :list-loading="listLoading"
          :is-init="isInit"
          :finance-list-setting="financeListSetting"
          :active-id="activeId"
          :table-height="setTableHeight"
          @addSort="addSort"
          @btnDel="btnDel"
          @btnVerificate="btnVerificate"
          @handleSelectionChange="handleSelectionChange"
        />
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :small="true"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <fixed-pagination v-show="list.page > 0 && !showMobilePage || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="filterParams"
              :filter-list="filterList"
              show-search-btn
              is-show-config
              show-mobile-icon
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus"/>
            <i v-if="exportLoading" class="el-icon-loading"/>
            <MoreOpeator
              ref="btnGroupRef"
              :list="moreOperatorList"
              show-mobile-icon
              @beginExport="beginExport"
            />
            <el-button v-if="hasRouteAuth('crm:finance:autoWriteOff')" :class="{'mobile-btn':showMobilePage}" size="small" class="empty-btn-style mr10" @click="toIntelligentList">智能核销</el-button>
            <createBtn v-if="hasRouteAuth('crm:finance:add')" text="新增" mobile-table @click.native="toCreate"/>
          </template>
          <template v-else>
            <div class="delete-button-container">
              <el-button
                v-if="hasRouteAuth('crm:finance:delete')"
                class="delete-button"
                size="small"
                @click="tobatchDelFinace">批量删除</el-button>
            </div>
            <div style="flex:1;display: flex;align-items: center;">
              <div v-if="selectData.length" class="select-box-style">
                <span class="select-data-num" style="margin-right: 0;">已选 <span>{{ selectData.length }}</span> 条，</span>
                <span v-if="allAmount || allAmount===0" class="select-data-amount">
                  收入金额
                  <el-tooltip class="item" placement="top" effect="dark">
                    <div slot="content" style="max-width: 200px;">{{ (allAmount / 100) | moneyFilter(true,'',true) }}</div>
                    <div style="margin-left:4px;">{{ (allAmount / 100) | bigNumFloorFilter }}</div>
                  </el-tooltip>
                </span>
                <el-button type="text" @click="clearSelect"><span class="el-icon-close"/></el-button>
              </div>
            </div>
            <el-pagination
              :current-page="list.page"
              :page-size="list.perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
      <orderSetting
        ref="orderSetting"
        :init-order-list="initFinanceList"
        :setting-type="'finance'"
        @handelSubmit="handelSubmit"/>
      <el-dialog
        :visible.sync="writeOffDialog"
        :lock-scroll="false"
        :modal-append-to-body="false"
        :append-to-body="true"
        :show-close="true"
        :class="{'mobile-el-dialog': showMobilePage}"
        class="enter-account-dialog medium-common-dialog-size"
        center>
        <VerificationDialog
          ref="verificationDialog"
          :write-off-dialog="writeOffDialog"
          :write-off-detail="writeOffDetail"
          :client-form-defalut="clientFormDefalut"
          :is-single-write-off="isSingleWriteOff"
          @handleFilterCurPayer="filterCurPayer"/>
        <span slot="footer" class="dialog-footer">
          <el-button v-if="isSingleWriteOff" size="small" type="primary" @click="btnSubmit(false)">提交</el-button>
          <el-button v-else class="empty-btn-style" size="small" @click="btnSubmit(true)">进入批量核销</el-button>
          <el-button type="info" class="cancel-btn-style" style="width: 80px" @click="writeOffDialog = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import settingImg from '@/assets/orderlist/setting-one.png';
import createButton from '@/components/CreateButton';
import orderSetting from '@/components/OrderList/orderSetting';
import DayAccountTable from '@/components/Finance/DayAccountTable';
import createBtn from '@/components/Common/baseComponent/createBtn';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import ListTab from '@/components/ListTab';
import VerificationDialog from '@/components/verificationDialog';
import { initFinanceList } from '@/components/OrderList/settingData';
import DataDisplay from '@/components/Common/baseComponent/dataDisplay';
import chargeOff from '@/views/finance/mixins/chargeOff';
import { getList, delFinance, batchdelFinance, getfinanciaStatistics, openAutoWriteOff } from '@/api/finance';
import { getPayOption } from '@/api/select';
import { getDepartmentAll } from '@/api/config';
import { getOrderSetting } from '@/api/order';
import { getFinancialFlowTab } from '@/api/select';
import { moneyFilter, bigNumFloorFilter } from '@/filters/number';
import { clientStatusFilter } from '@/filters/status';
import ElMessage, { showModal } from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import mobileTable from '@/mixins/mobileTable';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import selectOption from './mixin/selectOption';
import TableAdaptive from '@/mixins/tableAdaptive';
import icon_26 from '@/assets/dataDisplay/icon_26.png';
import icon_27 from '@/assets/dataDisplay/icon_27.png';
import icon_28 from '@/assets/dataDisplay/icon_28.png';
import icon_30 from '@/assets/dataDisplay/icon_30.png';
import { MessageBox } from 'element-ui';

export default {
  filters: {
    clientStatusFilter,
    moneyFilter,
    bigNumFloorFilter
  },
  components: {
    createButton,
    VerificationDialog,
    DayAccountTable,
    orderSetting,
    ListTab,
    MoreOpeator,
    DataDisplay,
    createBtn
  },
  mixins: [
    selectOption,
    chargeOff,
    TableAdaptive,
    mobileTable],
  data() {
    return {
      initFinanceList,
      settingImg,
      activeId: -1,
      isInit: true,
      tabList: [],
      filterParams: {},
      writeOffDialog: false,
      writeOffDetail: {},
      flowId: '',
      loading: false,
      clientFormDefalut: {},
      verificationInfo: {},
      page: 1,
      perPage: 20,
      financeListSetting: [],
      payOption: [],
      sortObj: {},
      selectData: [],
      allAmount: 0,
      departmentList: [],
      availWidth: '',
      ids: '',
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createStart',
        end: 'createEnd',
        type: 'time'
      }, {
        attr: 'arrivalTime',
        start: 'arrivalStartTime',
        end: 'arrivalEndTime',
        type: 'time'
      }, {
        attr: 'incomeAmount',
        start: 'incomeAmountStart',
        end: 'incomeAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'noWriteOffAmount',
        start: 'noWriteOffAmountStart',
        end: 'noWriteOffAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'chargeAmount',
        start: 'chargeAmountStart',
        end: 'chargeAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'sealMonth',
        start: 'sealMonthStart',
        end: 'sealMonthEnd',
        type: 'time'
      }, {
        attr: 'relatedInvoiceAmount',
        start: 'relatedInvoiceAmountStart',
        end: 'relatedInvoiceAmountEnd',
        type: 'moneyFixed'
      }],
      exportLoading: false,
      statisticsList: [],
      isAutoWriteOffing: false // 是否正在自动核销
    };
  },
  computed: {
    filterList() {
      const baseFilterList = [
        { keyword: 'clientName', name: '付款人名称', type: 'input', labelWidth: '96px' },
        { keyword: 'payName', name: '付款账号', type: 'input', labelWidth: '96px' },
        { keyword: 'transactionNumber', name: '交易单号', type: 'input', labelWidth: '96px' },
        { keyword: 'flowNumber', name: '流水单号', type: 'input', labelWidth: '96px' },
        { keyword: 'createName', name: '创建人', type: 'input', labelWidth: '96px' },
        { keyword: 'remark', name: '备注', type: 'input', labelWidth: '96px' },
        { keyword: 'incomeAmount', name: '收入金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'chargeAmount', name: '可核销金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'noWriteOffAmount', name: '无需核销金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'relatedInvoiceAmount', name: '关联发票金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'sealingState', name: '封账状态', type: 'select', options: this.sealingStateOption },
        { keyword: 'payType', name: '付款方式', type: 'select', options: this.payOption, labelWidth: '96px' },
        { keyword: 'clientType', name: '付款人类型', type: 'select', options: this.clientTypeOption },
        { keyword: 'departmentId', name: '所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.departmentList },
        { keyword: 'flowType', name: '类型', type: 'select', options: [{ value: 0, label: '普通' }, { value: 1, label: '对抵' }] },
        { keyword: 'relatedInvoice', name: '发票关联状态', type: 'select', options: [{ value: 0, label: '待关联' }, { value: 1, label: '已关联' }] },
        { keyword: 'createTime', name: '创建时间', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd', labelWidth: '96px' },
        { keyword: 'arrivalTime', name: '到账日期', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd', labelWidth: '96px' },
        { keyword: 'sealMonth', name: '封账月份', timeType: 'monthrange', type: 'rangeDate', format: 'yyyy/MM', labelWidth: '96px' }
      ];
      const verificationFilterItem = { keyword: 'verificationState', name: '核销状态', type: 'mulSelect', options: this.verificationOptions };
      if (this.activeId !== -1) {
        return _.cloneDeep(baseFilterList);
      } else {
        const cloneBaseFilterList = _.cloneDeep(baseFilterList);
        cloneBaseFilterList.splice(8, 0, verificationFilterItem);
        return cloneBaseFilterList;
      }
    },
    clientTypeOption() {
      return [{ value: 0, label: '公司' }, { value: 1, label: '个人' }];
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 256 : 295;
    },
    moreOperatorList() {
      const arr = [{
        label: '导入',
        tooltip: '导入新增流水时，请将导入模板的流水单号列删除，否则导入会出错',
        importApi: '/admin/financialFlow/import',
        callback: this.fetchData,
        type: 'import',
        auth: hasRouteAuth('crm:finance:import')
      }, {
        label: '导出',
        exportApi: '/admin/financialFlow/export',
        exportName: '流水明细',
        refName: 'exportRef',
        isBeforeExport: true,
        beforeExport: this.beforeExport,
        exportonComplate: this.exportonComplate,
        type: 'export',
        auth: hasRouteAuth('crm:finance:export')
      }, {
        label: '批量核销',
        handelClick: this.handleBatchWriteOff
      }, {
        label: '自动核销',
        handelClick: this.handleAutoWriteOff,
        auth: hasRouteAuth('crm:finance:autoWriteOff')
      }, {
        label: '批量导入核销',
        importApi: '/admin/financialFlow/batchImport',
        callback: this.fetchData,
        type: 'import',
        auth: hasRouteAuth('crm:finance:batchImport')
      }, {
        label: '核销模板下载',
        type: 'export',
        exportApi: '/admin/financialFlow/template/download',
        exportName: '核销模板'
      }];
      if (this.showMobilePage) {
        arr.unshift({
          label: '自定义列',
          tooltip: '自定义列',
          handelClick: this.openSetting
        });
      }
      return arr;
    }
  },
  // 判断弹窗消失的时候清空验证
  watch: {
    writeOffDialog(val, oldVal) {
      const clientForm = this.$refs.verificationDialog;
      if (clientForm !== undefined && clientForm.$refs.clientForm !== undefined) {
        clientForm.$refs.clientForm.resetFields();
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'editDayAccount' || from.name === 'chargeOff' || from.name === 'chargeOffDetail') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    this.availWidth = window.innerWidth;
    if (!this.$route.meta.isChange) {
      const hasDefaultPresetFilter = this.$refs.FilterToolRef && this.$refs.FilterToolRef.hasDefaultPresetFilter;
      // 当预设的默认筛选且为第一次进入页面时，不请求数据（会在 filterTool 组件进行筛选）
      if (!this.isInit || !hasDefaultPresetFilter) {
        this.activeId = -1;
        this.clearMixinSelection();
        this.queryEmpty();
      }
      // this.fetchData(true);
    } else {
      // 详情页跳转过滤同一付款人的多条流水
      const { clientName, clientType, states } = this.$route.query;
      if (clientName && states) {
        const verificationState = [];
        states.split(',').forEach(val => verificationState.push(Number(val)));
        this.$set(this.filterParams, 'clientName', clientName);
        this.$set(this.filterParams, 'clientType', clientType);
        this.$set(this.filterParams, 'verificationState', verificationState);
        console.log(this.filterParams);
        this.fetchData(true);
      } else {
        if (this.list && this.list.items && this.list.items.length === 0) {
          this.fetchData(true);
        } else {
          this.fetchData(false, true);
        }
      }
    }
    this.getPaySelect();
    this.getDepartment();
    this.getSettingData();
    this.writeOffDialog = false;
  },
  methods: {
    hasRouteAuth,
    addSort(obj) {
      this.sortObj = obj;
      this.fetchData(true);
    },
    formatParams() {
      const params = JSON.parse(JSON.stringify(this.filterParams));
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(['verificationState', 'departmentId'], params);
      if (this.activeId !== -1) {
        params.verificationState = this.activeId;
      }
      return params;
    },
    toCreate() {
      this.$router.push({
        name: 'createDayAccount'
      });
    },
    fetchData(reset = false, noLoading = false) {
      if (reset) this.page = 1;
      if (!noLoading) this.listLoading = true;
      const params = this.formatParams();
      this.getTabList(params);
      this.getStatisticsData(params);
      Object.assign(params, this.sortObj);
      getList(this.page, this.perPage, params).then(({ data }) => {
        this.isInit = false;
        data.items.map(item => { // 添加订单类型的icon,颜色
          const verificationStateObj = this.verificationState.find(currentValue => item.verificationState === currentValue.status);
          item = Object.assign(item, verificationStateObj);
          return item;
        });
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
        this.listLoading = false;
      });
    },
    // 批量核销
    handleBatchWriteOff() {
      if (!this.ids) {
        ElMessage.warning('请选择需要核销的流水');
        return;
      }
      this.checkVerificate(false, this.ids);
    },
    handleAutoWriteOff() {
      if (this.isAutoWriteOffing) {
        ElMessage.warning('任务进行中，请稍后操作');
        return;
      }
      showModal('是否开启自动核销？', '', {}).then(() => {
        const h = this.$createElement;
        this.isAutoWriteOffing = true;
        ElMessage.success('任务已开始，请稍后查看');
        openAutoWriteOff().then(res => {
          this.isAutoWriteOffing = false;
          if (res.code === 200) {
            MessageBox.confirm('', '', {
              message: h('p', null, [
                h('div', null, `完成核销${res.data}条流水`),
                h('div', { class: 'btns-container' }, [
                  h('el-button', { on: { click: () => {
                    this.fetchData();
                    this.$msgbox.close();
                  } }, class: 'resolve-btn', props: { type: 'primary', size: 'small' }}, '确认')
                ])
              ]),
              confirmButtonText: '',
              showConfirmButton: false,
              showCancelButton: false,
              type: 'success',
              lockScroll: false,
              closeOnClickModal: false,
              customClass: 'del-message success-message',
              iconClass: 'success-icon',
              center: true
            });
          }
        }).catch(err => {
          this.isAutoWriteOffing = false;
          console.log(err);
        });
      }).catch(() => {
        return false;
      });
    },
    beforeExport() {
      const params = this.formatParams();
      this.ids && (params.ids = this.ids);
      let msg = '<div>是否确定导出数据？</div>';
      if (!params.ids) {
        msg = msg + `<div style="color: red;font-size: 14px;">单次最多导出5000条</div>`;
      }
      this.$refs['btnGroupRef'] && this.$refs['btnGroupRef'].btnExport(params, 'exportRef', msg);
    },
    beginExport() {
      this.exportLoading = true;
    },
    exportonComplate() {
      this.exportLoading = false;
    },
    handelSubmit() {
      this.getSettingData(true);
    },
    handleTabClick(id) {
      this.activeId = id;
      this.fetchData(true);
    },
    getSettingData(showLoading = false) {
      if (showLoading) this.listLoading = true;
      getOrderSetting().then(res => {
        if (showLoading) this.listLoading = false;
        if (res.code === 200 && res.data !== '' && res.data.finance) {
          this.financeListSetting = this.jsonParse(res.data.finance);
        } else {
          this.financeListSetting = JSON.parse(JSON.stringify(this.initFinanceList));
        }
      }).catch(err => {
        this.financeListSetting = JSON.parse(JSON.stringify(this.initFinanceList));
        console.log(err);
      });
    },
    jsonParse(str) {
      if (typeof str !== 'string') return str;
      try {
        return JSON.parse(str);
      } catch (error) {
        console.log(error);
        return JSON.parse(JSON.stringify(this.initFinanceList));
      }
    },
    // 搜索查询
    queryClick() {
      this.fetchData(true);
    },
    // 清空效果
    queryEmpty() {
      this.filterParams = {};
      if (this.clearMixinSelection) this.clearMixinSelection();
      this.fetchData(true);
    },
    // 点击核销按钮
    btnVerificate(scope) {
      const { id } = scope.row;
      this.flowId = id;
      this.checkVerificate(true, id);
    },
    btnDel(scope) {
      showModal('是否确定删除该流水单', '', {
        iconClass: 'del-icon'
      }).then(() => {
        delFinance(scope.row.id).then(res => {
          this.$message.success('删除成功');
          if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
            this.page--;
          }
          this.fetchData(true);
          this.clearMixinSelection();
        }, result => {
          // this.$message.error(result.message);
        });
      }).catch(() => {
        return false;
      });
    },
    tobatchDelFinace() {
      if (!this.ids) {
        ElMessage.warning('请选择要删除的流水单');
        return;
      }
      showModal('是否确定删除流水单', '', {
        iconClass: 'del-icon'
      }).then(() => {
        const params = {
          ids: this.ids
        };
        batchdelFinance(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.fetchData(true);
            this.clearMixinSelection();
          } else {
            ElMessage.error(res.message);
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
    },
    // 选择表格
    handleSelectionChange(e) {
      this.allAmount = 0; // 初始化
      this.selectData = e;
      this.selectData.map(item => {
        this.allAmount += item.incomeAmount;
      });
      this.ids = e.map(item => {
        return item.id;
      }).join(',');
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    openSetting() {
      this.$refs.orderSetting.openDialog(this.financeListSetting);
    },
    toIntelligentList() {
      this.$router.push({ name: 'intelligentList' });
    },
    async getTabList(params) {
      try {
        const result = await getFinancialFlowTab(params);
        if (result.code === 200) {
          this.tabList = result.data;
        }
      } catch (error) {
        this.tabList = [
          { name: '全部', id: -1 },
          { name: '待核销', id: 0 },
          { name: '部分核销', id: 2 },
          { name: '异常核销', id: 3 },
          { name: '已完成', id: 1 }
        ];
        console.log(error);
      }
    },
    async getPaySelect() {
      try {
        const result = await getPayOption();
        if (result.code === 200) {
          result.data.forEach(i => {
            i.value = i.id;
            i.label = i.name;
          });
          this.payOption = result.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    clearSelect() {
      showModal('是否清空已勾选的数据？', '').then(() => {
        this.clearMixinSelection();
      });
    },
    clearMixinSelection() {
      if (this.$refs.dayAccountTable && this.$refs.dayAccountTable.clearMixinSelection) {
        this.$refs.dayAccountTable.clearMixinSelection();
      }
    },
    getDepartment() {
      getDepartmentAll().then(res => {
        this.departmentList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 查询同一付款人的多条非0流水
    filterCurPayer(info) {
      this.filterParams = {};
      if (this.clearMixinSelection) this.clearMixinSelection();
      this.$set(this.filterParams, 'clientType', info.clientType);
      this.$set(this.filterParams, 'clientName', info.clientName);
      this.$set(this.filterParams, 'verificationState', [0, 2, 3]);
      this.writeOffDialog = false;
      this.fetchData(true);
    },
    async getStatisticsData(params) {
      try {
        this.statisticsList = [
          { data: 0, label: '收入金额', icon: icon_26 },
          { data: 0, label: '可核销金额', icon: icon_27 },
          { data: 0, label: '无需核销金额', icon: icon_28 },
          { data: 0, label: '关联发票金额', icon: icon_30 }
        ];
        const { page, perPage } = params;
        if (page) delete params.page;
        if (perPage) delete params.perPage;
        const res = await getfinanciaStatistics(params);
        const { code, data = {}} = res;
        if (code === 200) {
          const { incomeAmount, chargeAmount, noWriteOffAmount, relatedInvoiceAmount } = data;
          this.statisticsList = [
            { data: (incomeAmount / 100).toFixed(2), label: '收入金额', icon: icon_26 },
            { data: (chargeAmount / 100).toFixed(2), label: '可核销金额', icon: icon_27 },
            { data: (noWriteOffAmount / 100).toFixed(2), label: '无需核销金额', icon: icon_28 },
            { data: (relatedInvoiceAmount / 100).toFixed(2), label: '关联发票金额', icon: icon_30 }
          ];
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.day-account-box {
  margin-top: 1px;
}
.financial-flow {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  min-height: calc(100vh - 113px);
  .table-list {
    .el-row {
      padding: 0;
    }
  }
  .el-icon-loading {
    font-size: 14px;
    margin-right: 4px;
  }
  .select-box-style {
    height: 30px;
    width: auto;
    background: #fafafc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    margin-left: 10px;
    margin-right: 10px;
    .select-data-num, .select-data-amount {
      font-size: 14px;
      color: #666;
      margin-right: 10px;
      span, .item {
        font-size: 14px;
        font-weight: 600;
        color: #406eff;
        line-height: 14px;
      }
    }
    .el-icon-close {
      font-size:14px;
      margin-left:5px;
      color: #666;
    }
    .el-icon-close:hover {
      color: #406EFF !important;
      font-weight: bold;
    }
    .select-data-amount {
      display: flex;
      align-items: center;
    }
  }
  .order-setting {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-color: #EFF3FB;
    border-radius: 4px;
    display: flex;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    img {
      width: 18px;
      height: 18px;
    }
  }
}
.btns-container {
  margin-top: 20px;
}
.check-tooltip, .eidt-tooltip, .del-tooltip, .verificate-tooltip {
  padding: 5px 10px;
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  padding: 7px 14px;
  text-align: center;
  margin-right: 10px;
  &:hover {
    background: #406EFF;
    color: #fff;
  }
}
.custom-btn {
  height: 32px;
  padding: 7px 15px;
  margin-right: 10px;
}
</style>
<style lang="scss">
@import '@/styles/placeholder.scss';
.el-select__tags .el-tag--info {
  padding: 0 1px !important;
  min-width: 24px !important;
}
.enter-account-dialog {
  .el-dialog {
    border-radius: 12px;
  }
  .el-dialog__body {
    padding: 16px 24px !important;
  }
  .el-dialog__footer {
    padding: 24px;
    padding-top: 0;
  }
  .dialog-footer {
    .empty-btn-style {
      border-color: #406EFF;
      background: #fff;
      color: #406EFF;
      padding: 7px 16px;
      &:hover {
        background: #406EFF;
        color: #fff;
      }
    }
  }
}
.el-message-box--center.charge-message-cancel .el-message-box__btns {
  @extend %el-message-box--center-el-message-box__btns !optional;
}
</style>
